<template>
  <div class="settings-container">
    <h2 class="settings-title">
      <el-icon><Setting /></el-icon>
      设置
    </h2>

    <div class="custom-menu">
      <div
          class="menu-item"
          @click="handleSelect('1')"
      >
        <el-icon><Folder /></el-icon>
        <span>代码仓库</span>
      </div>

      <div
          class="menu-item"
          @click="handleSelect('2')"
      >
        <el-icon><Message /></el-icon>
        <span>联系开发者</span>
      </div>

      <div
          class="menu-item"
          @click="handleSelect('3')"
      >
        <el-icon><InfoFilled /></el-icon>
        <span>功能介绍</span>
      </div>

      <div
          class="menu-item"
          @click="handleSelect('4')"
      >
        <el-icon><Download /></el-icon>
        <span>Android应用下载</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {
  Setting, Folder, Message, InfoFilled, Download
} from '@element-plus/icons-vue';

const router = useRouter();

const handleSelect = (key) => {
  switch (key) {
    case '1':
      router.push('/code-repo');
      break;
    case '2':
      router.push('/contact-dev');
      break;
    case '3':
      router.push('/features');
      break;
    case '4':
      router.push('/android-download');
      break;
  }
};
</script>

<style scoped>
.settings-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.settings-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 24px;
}

.settings-title .el-icon {
  margin-right: 10px;
  font-size: 20px;
}

.custom-menu {
  width: 100%;
}

.menu-item {
  height: 50px;
  line-height: 50px;
  margin-bottom: 5px;
  padding: 0 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-item .el-icon {
  margin-right: 10px;
}
</style>